<!-- 时间类型范围搜索 -->
<template>
  <el-form :inline="true" :model="form">
    <el-form-item label="统计单位：">
      <el-select v-model="form.unit" @change="change">
        <el-option
          v-for="item in units"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间范围：">
      <el-date-picker
        v-if="form.unit === 'day'"
        v-model="form.value"
        type="daterange"
        value-format="timestamp"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptionsDate"
      >
      </el-date-picker>
      <el-date-picker
        v-if="form.unit === 'month'"
        v-model="form.value"
        type="monthrange"
        value-format="timestamp"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptionsMonth"
      >
      </el-date-picker>

      <template v-if="form.unit === 'year'">
        <el-col :span="11">
          <el-date-picker
            v-model="form.value[0]"
            type="year"
            placeholder="开始日期"
            style="width: 100%"
            value-format="timestamp"
            :picker-options="pickerOptionsYear1"
          >
          </el-date-picker>
        </el-col>
        <el-col class="flex justify-center" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker
            v-model="form.value[1]"
            type="year"
            placeholder="结束日期"
            style="width: 100%"
            value-format="timestamp"
            :picker-options="pickerOptionsYear2"
          >
          </el-date-picker>
        </el-col>
      </template>
    </el-form-item>

    <slot />
  </el-form>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    let that = this;
    return {
      units: [
        {
          value: "day",
          key: "YYYY-MM-DD",
          label: "日",
        },
        {
          value: "month",
          key: "YYYY-M",
          label: "月",
        },
        {
          value: "year",
          key: "YYYY",
          label: "年",
        },
      ],

      timeOptionRange: null,
      pickerOptionsDate: {
        disabledDate(time) {
          // 获取选中时间
          let timeOptionRange = that.timeOptionRange;
          // 获取时间范围(30天的毫秒数)
          let secondNum = 30 * 24 * 60 * 60 * 1000;
          if (timeOptionRange) {
            //如果有选中时间 设置超过选中时间后的30天||超过选中前的30天||大于当前时间 不可选
            return (
              time.getTime() > timeOptionRange.getTime() + secondNum ||
              time.getTime() < timeOptionRange.getTime() - secondNum ||
              time.getTime() > Date.now() - 8.64e6
            );
          } else {
            //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
            return time.getTime() > Date.now() - 8.64e6;
          }
        },
        onPick(date) {
          // 当选中了第一个日期还没选第二个
          // 只选中一个的时候自动赋值给minDate，当选中第二个后组件自动匹配，将大小日期分别赋值给maxDate、minDate
          if (date.minDate && !date.maxDate) {
            that.timeOptionRange = date.minDate;
          }
          // 如果有maxDate属性，表示2个日期都选择了，则重置timeOptionRange
          if (date.maxDate) {
            that.timeOptionRange = null;
          }
        },
      },
      pickerOptionsMonth: {
        disabledDate(time) {
          // 获取选中时间
          let timeOptionRange = that.timeOptionRange;
          // 获取时间范围(12个月的毫秒数)
          let secondNum = 12 * 30 * 24 * 60 * 60 * 1000;
          if (timeOptionRange) {
            //如果有选中时间 设置超过选中时间后的30天||超过选中前的30天||大于当前时间 不可选
            return (
              time.getTime() > timeOptionRange.getTime() + secondNum ||
              time.getTime() < timeOptionRange.getTime() - secondNum ||
              time.getTime() > Date.now() - 8.64e6
            );
          } else {
            //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
            return time.getTime() > Date.now() - 8.64e6;
          }
        },
        onPick(date) {
          // 当选中了第一个日期还没选第二个
          // 只选中一个的时候自动赋值给minDate，当选中第二个后组件自动匹配，将大小日期分别赋值给maxDate、minDate
          if (date.minDate && !date.maxDate) {
            that.timeOptionRange = date.minDate;
          }
          // 如果有maxDate属性，表示2个日期都选择了，则重置timeOptionRange
          if (date.maxDate) {
            that.timeOptionRange = null;
          }
        },
      },
      pickerOptionsYear1: {
        disabledDate(time) {
          // 获取选中时间
          let timeOptionRange = that.form.value[1];
          // 获取时间范围(10年的毫秒数)
          let secondNum = 9 * 12 * 30 * 24 * 60 * 60 * 1000;
          if (timeOptionRange) {
            return (
              time.getTime() > timeOptionRange ||
              time.getTime() < timeOptionRange - secondNum ||
              time.getTime() > Date.now() - 8.64e6
            );
          } else {
            //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
            return time.getTime() > Date.now() - 8.64e6;
          }
        },
      },
      pickerOptionsYear2: {
        disabledDate(time) {
          // 获取选中时间
          let timeOptionRange = that.form.value[0];
          // 获取时间范围(10年的毫秒数)
          let secondNum = 10 * 12 * 30 * 24 * 60 * 60 * 1000;
          if (timeOptionRange) {
            return (
              time.getTime() < timeOptionRange ||
              time.getTime() > timeOptionRange + secondNum ||
              time.getTime() > Date.now() - 8.64e6
            );
          } else {
            //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
            return time.getTime() > Date.now() - 8.64e6;
          }
        },
      },
      form: {
        unit: "day",
        value: [],
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.form.value = [dayjs().date(1).valueOf(), dayjs().valueOf()];
  },
  methods: {
    change() {
      this.form.value = [];
      this.timeOptionRange = null;
    },
    getTime() {
      let unit = this.form.unit;
      return {
        startDate: this.form.value[0]
          ? dayjs(this.form.value[0])
              .startOf(unit)
              .format("YYYY-MM-DD HH:mm:ss")
          : null,
        endDate: this.form.value[1]
          ? dayjs(this.form.value[1]).endOf(unit).format("YYYY-MM-DD HH:mm:ss")
          : null,
        type: unit,
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>